<template>
	<view class="income-detail">
		<NavBar title="收益明细" :isBack="true"></NavBar>
		<view class="content">
			<div class="tabs">
				<Tabs :tabs="tabs" @change="handleTabsChange" @customDate="handleCustomDate" :active="active"></Tabs>
			</div>
			<view class="header">
				<view class="item">
					<view class="title">累计收益</view>
					<view class="price">{{ detailsObject.Accumulated_revenue }}</view>
					<view class="account-price">含待结算：{{ detailsObject.Income }}元</view>
				</view>
				<view class="withdraw-btn" @click="$gotoUrl('/pages/services/incomeWithdrawal?state=server')">
					去提现
				</view>
			</view>
			<up-empty mode="data" v-if="!detailsList.length"></up-empty>
			<view v-else class="footer">
				<view class="title">收益明细：</view>
				<view class="box">
					<view class="item" v-for="(item, index) in detailsList" :key="index">
						<view class="order-header">
							<view class="order-msg">
								<view>商品佣金</view>
								<view class="price">+{{ item.money }}元</view>
							</view>
							<view class="status" :class="{ 'done': !item.type }">{{ item.status }}</view>
						</view>
						<view class="order-footer">
							<view>订单号：{{ item.orders.orderid }}</view>
							<view>{{ item.createtime }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	getServerRevenue
} from '@/api/services.js'
import Tabs from '@/components/Tabs.vue';
import {
	reactive,
	toRefs,
	onMounted
} from 'vue'
const state = reactive({
	tabs: [{
		label: "全部",
		value: 1
	},
	{
		label: "今日",
		value: 2
	},
	{
		label: "昨日",
		value: 3
	},
	{
		label: "近七天",
		value: 4
	}, {
		label: "自定义",
		value: 5
	}
	],
	active: 1,
	detailsObject: {
		Accumulated_revenue: 0, //累计待结算金额
		Income: 0, //含待结算
	},
	detailsList: [],
	pageNum: 1
})

function handleTabsChange (item) {
	state.active = item.value
	if (state.active != 5) {
		getRevenueDetailsData()
	}
}

function handleCustomDate (startVal, endVal) {
	console.log(startVal, endVal)
	getRevenueDetailsData(startVal, endVal)
}
// 获取收益明细数据
async function getRevenueDetailsData (starttime, overtime) {
	let params = {
		type: state.active,
		starttime,
		overtime,
		page: state.pageNum
	}
	const res = await getServerRevenue(params)
	state.detailsObject = res.data
	state.detailsList = res.data.data.data
}

function toWithdraw () {
	uni.navigateTo({
		url: "/pages/services/incomeWithdrawal?state=1"
	})
}
onMounted(() => {
	getRevenueDetailsData()
})
const {
	tabs,
	active,
	detailsObject,
	detailsList
} = toRefs(state)
</script>

<style lang="scss" scoped>
.income-detail {
	.content {
		position: relative;
		z-index: 1;
		padding: 36rpx;

		:deep(.tabs) {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.tab {
				font-size: 26rpx;
			}

			.active {
				font-size: 30rpx;
			}
		}

		.header {
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			width: 678rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 60rpx;

			.withdraw-btn {
				text-align: center;
				width: 120rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 55rpx 55rpx 55rpx 55rpx;
				border: 1rpx solid #58DBCF;
				font-size: 28rpx;
			}


			.item {
				font-weight: 500;
				font-size: 18rpx;
				color: #333333;

				.title {
					font-size: 24rpx;
				}

				.price {
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
					margin-top: 25rpx;
				}


				.account-price {
					margin-top: 47rpx;
				}
			}
		}

		.footer {
			margin-top: 46rpx;

			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 24rpx;
			}

			.box {
				.item {
					box-sizing: border-box;
					padding: 35rpx 27rpx 30rpx;
					width: 678rpx;
					background: #FFFFFF;
					border-radius: 22rpx 22rpx 22rpx 22rpx;
					margin-bottom: 26rpx;

					.order-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8rpx;

						.order-msg {
							display: flex;
							align-items: center;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;

							.price {
								color: #FF0000;
								margin-left: 13rpx;
							}
						}

						.status {
							text-align: center;
							width: 102rpx;
							height: 38rpx;
							line-height: 38rpx;
							font-weight: 500;
							font-size: 18rpx;
							color: #FF0000;
							background: rgba(255, 0, 0, 0.1);
							border-radius: 10rpx 10rpx 10rpx 10rpx;
							border: 1rpx solid #FF0000;
						}

						.done {
							background: rgba(88, 219, 207, 0.1);
							color: #58DBCF;
							border: 1rpx solid #58DBCF;
						}
					}

					.order-footer {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
		}
	}
}
</style>